<template>
  <div class="archive-container">
    <div
      class="archive-item"
      v-for="(item, index) in archives"
      :key="index"
      @click="handleViewArchive(item)"
    >
      <div class="folder" :class="item.status">
        <span class="status-badge" :class="item.status">{{
          item.statusText
        }}</span>
        <div class="folder-top">
          <div class="folder-top-label"></div>
        </div>
        <div class="folder-body">
          <div class="folder-hardware">
            <div class="folder-ring">
              <div class="folder-ring-inner"></div>
            </div>
            <div class="folder-string-connection"></div>
            <div class="folder-string-knot"></div>
            <div class="folder-string"></div>
            <div class="folder-string-end"></div>
          </div>
        </div>
        <div class="folder-edge"></div>
        <div class="folder-bottom">
          <div class="folder-bottom-label">
            <span>档号：</span>
            <span>{{ item.number || '--' }}</span>
          </div>
        </div>
        <div class="folder-content">
          <h3>{{ item.name }}</h3>
          <div class="archive-date">{{ item.expirationDate }}</div>
          <div class="archive-content">{{ item.summary }}</div>
          <div>
            <span
              class="archive-tag"
              v-for="(tag, tagIndex) in item.tags"
              :key="tagIndex"
              >{{ tag }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component
export default class ArchiveComponent extends Vue {
  // 属性
  @Prop({ default: [] }) archives!: any[];

  handleViewArchive(item: any) {
    console.log(item);
    this.$emit('viewArchive', item);
  }
}
</script>
<style lang="less" scoped>
.archive-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  transform-style: preserve-3d;
  perspective: 1500px;
}

.archive-item {
  width: 180px;
  height: 250px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  perspective: 1000px;
  margin: 5px 5px 14px 5px;

  &:hover {
    transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
    z-index: 100;

    .folder {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .folder-content {
      transform: translateZ(15px) translateX(-50%);
    }
  }
}

.folder {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.1);
  overflow: visible;
  transform-style: preserve-3d;
  transition: all 0.4s ease;

  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    transform: translateZ(-3px);
    z-index: -1;
  }

  &.normal {
    background-color: #e0c9a6;
    border: 1px solid rgba(0, 0, 0, 0.1);

    .folder-top,
    .folder-bottom {
      background: linear-gradient(to bottom, #c9b393, #b5a080);
    }

    .folder-top-label {
      background: linear-gradient(to bottom, #d6c6af, #c9b9a2);
    }

    .folder-body {
      background: linear-gradient(90deg, #e0c9a6 48%, #bfae90 50%, #ded2ba 52%);
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    }
  }

  &.expire {
    background-color: #f8d7da;
    border: 1px solid rgba(220, 53, 69, 0.2);

    .folder-top,
    .folder-bottom {
      background: linear-gradient(to bottom, #e77681, #dc3545);
    }

    .folder-top-label {
      background: linear-gradient(to bottom, #f1aeb5, #e77681);
    }

    .folder-body {
      background: linear-gradient(90deg, #f8d7da 48%, #e77681 50%, #fadee1 52%);
      box-shadow: inset 0 0 10px rgba(220, 53, 69, 0.1);
    }
  }

  &.borrowing {
    background-color: #cfe2ff;
    border: 1px solid rgba(13, 110, 253, 0.2);

    .folder-top,
    .folder-bottom {
      background: linear-gradient(to bottom, #9ec5fe, #0d6efd);
    }

    .folder-top-label {
      background: linear-gradient(to bottom, #bddbfe, #9ec5fe);
    }

    .folder-body {
      background: linear-gradient(90deg, #cfe2ff 48%, #9ec5fe 50%, #dce9ff 52%);
      box-shadow: inset 0 0 10px rgba(13, 110, 253, 0.1);
    }
  }

  &.destroy {
    background-color: #d1e7dd;
    border: 1px solid rgba(25, 135, 84, 0.2);

    .folder-top,
    .folder-bottom {
      background: linear-gradient(to bottom, #a3cfbb, #198754);
    }

    .folder-top-label {
      background: linear-gradient(to bottom, #badbcc, #a3cfbb);
    }

    .folder-body {
      background: linear-gradient(90deg, #d1e7dd 48%, #a3cfbb 50%, #e0f0e9 52%);
      box-shadow: inset 0 0 10px rgba(25, 135, 84, 0.1);
    }
  }

  &.archived {
    background-color: #e2e3e5;
    border: 1px solid rgba(108, 117, 125, 0.2);

    .folder-top,
    .folder-bottom {
      background: linear-gradient(to bottom, #c4c5c7, #6c757d);
    }

    .folder-top-label {
      background: linear-gradient(to bottom, #d3d4d6, #c4c5c7);
    }

    .folder-body {
      background: linear-gradient(90deg, #e2e3e5 48%, #c4c5c7 50%, #ececed 52%);
      box-shadow: inset 0 0 10px rgba(108, 117, 125, 0.1);
    }
  }
}

.folder-top {
  height: 50px;
  border-radius: 10px 10px 0 0;
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.05);
}

.folder-top-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 70%;
  border-radius: 10px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.folder-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);

  .folder-bottom-label {
    font-size: 12px;
    color: #666;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    height: 100%;
  }
}

.folder-body {
  position: absolute;
  top: 50px;
  bottom: 20px;
  width: 100%;
  transform-style: preserve-3d;
}

/* 文件夹厚度效果 */
.folder-edge {
  position: absolute;
  right: 0;
  top: 50px;
  bottom: 20px;
  width: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  transform: rotateY(-45deg) translateZ(2px);
  transform-origin: right center;
}

.folder-hardware {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 100px;
  z-index: 20;
  transform-style: preserve-3d;
}

.folder-ring {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(6px);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c0c0c0, #e8e8e8);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25),
    inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -2px 2px rgba(0, 0, 0, 0.2);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.folder-ring:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  border-radius: 50%;
}

.folder-ring:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 20%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0) 20%
    );
  opacity: 0.5;
  border-radius: 50%;
  mix-blend-mode: overlay;
}

.folder-ring-inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d4d4d4, #f0f0f0);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3),
    0 1px 1px rgba(255, 255, 255, 0.7);
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.folder-ring-inner:before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.5) 40%,
    rgba(255, 255, 255, 0) 60%
  );
}

.folder-string {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%) translateZ(5px);
  width: 3px;
  height: 65px;
  background: linear-gradient(
    to right,
    rgba(180, 32, 32, 0.8) 0%,
    rgba(220, 50, 50, 1) 40%,
    rgba(180, 32, 32, 0.8) 100%
  );
  z-index: 5;
  border-radius: 2px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
}

.folder-string:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.1) 3px,
      rgba(0, 0, 0, 0.1) 4px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 12px,
      rgba(0, 0, 0, 0.15) 12px,
      rgba(0, 0, 0, 0.15) 14px
    );
  opacity: 0.7;
  z-index: 6;
}

.folder-string-knot {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateZ(5px);
  width: 6px;
  height: 6px;
  background: linear-gradient(145deg, #c13030, #aa2a2a);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 7;
}

.folder-string-end {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) translateZ(5px);
  width: 5px;
  height: 7px;
  background: linear-gradient(to bottom, #c13030, #aa2a2a);
  border-radius: 1px 1px 3px 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 7;
}

.folder-string-connection {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%) translateZ(5px);
  width: 5px;
  height: 3px;
  background: #b82b2b;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  z-index: 6;
}

.folder-content {
  position: absolute;
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 154px;
  background-color: #fff;
  padding: 12px;
  border-radius: 5px;
  z-index: 15;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.4s ease;
  transform-style: preserve-3d;

  &:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: #fafafa;
    z-index: -1;
    transform: translateZ(-1px);
  }

  &:after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    background-color: #f5f5f5;
    z-index: -2;
    transform: translateZ(-2px);
  }
}

.status-badge {
  position: absolute;
  top: 44px;
  right: 19px;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 10px 10px 0 0;
  color: white;
  font-weight: bold;
  z-index: 20;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: translateZ(2px);

  &.expire {
    background: linear-gradient(to bottom, #dc3545, #c82333);
  }

  &.borrowing {
    background: linear-gradient(to bottom, #0d6efd, #0b5ed7);
  }

  &.destroy {
    background: linear-gradient(to bottom, #198754, #157347);
  }

  &.archived,
  &.normal {
    background: linear-gradient(to bottom, #6c757d, #5a6268);
  }
}

.archive-item h3 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 13px;
  color: #333;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.archive-date {
  color: #888;
  font-size: 12px;
  margin-bottom: 8px;
}

.archive-content {
  color: #555;
  line-height: 1.4;
  font-size: 12px;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.archive-tag {
  display: inline-block;
  background-color: #f5f5f5;
  color: #666;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 10px;
  margin-right: 2px;
  margin-top: 2px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.header {
  background: linear-gradient(to bottom, #364c63, #2c3e50);
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
  position: relative;
  z-index: 50;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.search-bar {
  padding: 8px 15px;
  border-radius: 20px;
  border: none;
  width: 250px;
  font-size: 14px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1),
    0 2px 3px rgba(255, 255, 255, 0.1);
}

.filter-options {
  display: flex;
  gap: 10px;
  margin: 10px 40px 20px;
  position: relative;
  z-index: 40;
}

.filter-button {
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(to bottom, #fcfcfc, #f0f0f0);
  color: #212529;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  transform: translateZ(5px);
}

.filter-button:hover {
  background: linear-gradient(to bottom, #f5f5f5, #e5e5e5);
  transform: translateZ(8px);
}

.filter-button.active {
  background: linear-gradient(to bottom, #556677, #2c3e50);
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 档案柜架子效果 */
.cabinet-container {
  position: relative;
  margin-top: 30px;
  perspective: 1000px;
}

.cabinet-shelf {
  height: 30px;
  background: linear-gradient(to bottom, #d0c0b0, #b3aaa0);
  margin-top: 10px;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 30;
  transform-style: preserve-3d;
}

.cabinet-shelf:before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  height: 5px;
  background-color: #e5d9cc;
  border-radius: 5px 5px 0 0;
}

.cabinet-front {
  height: 15px;
  background: linear-gradient(to bottom, #a39790, #8c847d);
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  transform-origin: top;
  transform: rotateX(-90deg);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.cabinet-shadow {
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  filter: blur(10px);
  border-radius: 50%;
  z-index: 20;
}
</style>
